<template lang="">
	<div>
		<div>
			<!-- 副导航 -->
			<c-r-m-nav-cell
				ref="navcell" 
				:crm-type="crmType" 
				route-type="index"/>
				
			<!-- 筛选 -->	
			<div class="shitu-box">
				<c-r-m-list-head
					ref="listHead" 
					:crm-type="crmType" 
					:actiontype="actiontype"
					:scene_id="scene_id"
					@on-handle="listHeadHandle"/>
				
				<c-r-m-option-button
					ref="search" 
					:crm-type="crmType" 
					:form-data="formData"
					:searchtype="searchtype"
					:actiontype="actiontype"
					:filter-arr="filterArr"
					:scene_id="scene_id"
					@on-handle="optionHandle"
					@on-search="searchHandle"
					@on-height-search="heightSearchHandle"
					@createSaveSuccess="createSaveSuccess"/>	
			</div>
			
			<!-- 信息 -->
			<div style="height: 300px;  background-color: #fff;width: 1200px;margin-top: 10px;">
				<c-r-m-table-head
					ref="crmTableHead"
					:crm-type="crmType"
					:show-hegiht-search="true"
					:actiontype="actiontype"
					@exportData="exportData"
				    @filter="handleFilter"
					@handle="handleHandle">
				</c-r-m-table-head>
				<el-table
					v-loading="loading"
					id="crm-table"
					:data="list" 
					class="n-table--border"
					:cell-style="cellStyle"
					stripe
					size="mini"
					style="width: 100%"
					:header-cell-style="{'background-color':'#f6faff'}" 
					@row-click="handleRowClick"
					@sort-change="sortChange"
					@selection-change="handleSelectionChange">
					<template slot="empty"> 
						<el-empty 
							description="暂无数据"></el-empty>
					</template>
					<el-table-column
						v-if="fieldList.length > 0"
						show-overflow-tooltip
						type="selection"
						align="center"
						width="45"/>
					<el-table-column
						v-for="(item, index) in fieldList"
						v-if="item.prop == 'name'"
						:key="index"
						:prop="item.prop"
						:label="item.label"
						:formatter="fieldFormatter"
						sortable="custom">
					</el-table-column>
					<el-table-column
						v-else
						:key="index"
						:prop="item.prop"
						:label="item.label"
						:formatter="fieldFormatter"
						sortable="custom">
						<template
						  slot="header"
						  slot-scope="scope">
						  <div class="table-head-name">{{ scope.column.label }}</div>
						</template>
					</el-table-column>
					<!-- 操作 -->
					<el-table-column
						align="center"
						label="操作"
						width="55"
						v-if="fieldList.length > 0">
							<template slot-scope="scope">
								<el-link
									type="primary"
									v-if="allAuth.contract.read"
									@click="handleAction({'type':'read','data':scope.row})">查看</el-link>
								<el-link
									type="primary"
									v-if="allAuth.contract.update_contractcomplain"
									@click="handleAction({'type':'update','data':scope.row})">修改</el-link>
							</template>
					</el-table-column>
				</el-table>
				<div class="p-contianer">
					<el-pagination 
						:current-page="currentPage"
						:page-sizes="pageSizes"
						:page-size.sync="pageSize"
						:total="total"
						class="p-bar"
						layout="total, sizes, prev, pager, next, jumper"
						@size-change="handleSizeChange"
						@current-change="handleCurrentChange"/>
				</div>
			</div>
		</div>
		<!-- dialog弹窗 -->
		<dialog-form
			:dialog-visible="dialogForm"
			:title="title"
			ref="crmform"  
			:crm-type="crmType"
			:fields-data = "fieldsData"
			:action="action"
			:form-data="formData"
			@close = "closeDialog"
			@save-dialog="saveDialog">
		</dialog-form>
	</div>
</template>
<script>
	import { mapGetters } from 'vuex'
	import table from '../../mixins/contract'
	import { crmContractSave,crmContractcomplainUpdate } from '@/api/contract/contract'
	import DialogForm from '@/components/FromData/dialogForm'
	export default {
		name: "app",
		components: {
			DialogForm
		},
		mixins: [table],
		data() {
			return {
				crmType: 'contract',
				formData:{},
				
				// dialog弹窗
				dialogForm:false,
				title:"",
				dialogType:"",
				fieldsData:[],
				action:{ type: '',relevant:'' },
				detailData:{},
				
				actiontype:9,
				searchtype:22
				
			}
		},
		computed: {
			...mapGetters(['allAuth'])
		},
		methods: {
			/** 通过回调控制style */
			cellStyle({ row, column, rowIndex, columnIndex }) {
			  if (column.property === 'customer') {
			    return { color: '#3E84E9', cursor: 'pointer' }
			  } else {
			    return ''
			  }
			},
			
			// 创建
			createSaveSuccess(data){
				crmContractSave(data).then((res) => {
					this.$message.success(res.data)
					this.getList()
					this.$refs['search'].isCreate = false
					this.formData = {}
				}).catch(() => {})
			},
			
			handleAction(item){
				switch (item.type){
					case "read":
						this.$router.push({
							path:"/contract/read/"+item.data.contract_id
						}) 
						break;
						
					case "update":
						this.title = "修改客户反馈"
						this.formData = JSON.parse(JSON.stringify(item.data))
						this.action = { type: 'update',relevant:'contractcomplain',actiontype:18 }
						this.dialogForm = true
						break;
				}
			},
			
			
			// 弹窗操作
			closeDialog(){
				this.title = ""
				this.dialogForm = false
				this.formData = {}
			},
			
			// 保存操作
			saveDialog(item){
				let data = item.data
				let request
				if(item.type=="update_contract"){
					request = crmContractUpdate
				}else if(item.type=="update_contractcomplain"){
					request = crmContractcomplainUpdate
				}
				
				request(data)
					.then(res => {
						this.$message.success(res.data)
						this.closeDialog()
						this.getList()
					})
			}
		},
	};
</script>
<style scoped>
	.shitu-box {
		margin-top: 10px;
		padding: 10px;
		background-color: #fff;
		width: 1200px;
		font-size: 15px;
	}
	/deep/ .p-contianer{
		background-color: #fff !important;
		padding:10px
	}
	/deep/ .table-head-name{
		display: inline;
	}
	/deep/ .el-table  {
	  overflow: visible;
	}
	 
	/deep/ .el-table__header-wrapper {
	  position: sticky;
	  top: 50px;
	  z-index: 10;
	}
	.icon, .customer-lock{
		cursor: pointer;
		font-size: 15px;
	}
	.customer-lock {
		color: #f15e64;
	}
</style>